import React, {Component} from "react";

import {Form, Input, Button, Row, Col, message} from "antd";

import '@src/style/login.scss';
import axios from '@src/lib/axios';

export default class Login extends Component {
    //static contextType = ApiContext;
    formRef = React.createRef();
    state = {
        loading: false
    };

    componentDidMount() {
    }

    onFinish = values => {
        this.setState({ loading: true });
        console.log('Success:', values);
        axios.post('/user/login', {
            ...values,
            source: 'web'
        }).then(res => {
            this.setState({ loading: false });
            if (res.code === 0) {
                message.success('登陆成功！');
                localStorage.setItem('_token', JSON.stringify(res.data));
                this.props.history.push('/');
            }
        }).catch(e => {this.setState({ loading: false });})
    };

    render() {
        let { loading } = this.state;
        return (
            <div className="login-box">
                <div className="logo-text">Tour admin</div>
                <Form
                    ref={this.formRef}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请填写账号!',
                            },
                        ]}
                    >
                        <Input placeholder="用户名" style={{width: '100%'}}/>
                    </Form.Item>




                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请填写密码!',
                            },
                        ]}
                    >
                        <Input.Password placeholder="密码" style={{width: '100%'}}/>
                    </Form.Item>

                    <Form.Item
                        name="serial_number"
                        rules={[
                            {
                                required: true,
                                message: '请填写企业号!',
                            },
                        ]}
                    >
                        <Input placeholder="企业号" style={{width: '100%'}}/>
                    </Form.Item>

                    <Row>
                        <Col span={24} align="center">
                            <Button type="primary" htmlType="submit" style={{width: '100%'}} loading={loading}>
                                登 陆
                            </Button>
                        </Col>
                    </Row>
                </Form>
            </div>
        )

    }
}
